<template>
  <div id="index" ref="appRef">
    <el-dialog
      :show-close="false"
      :visible.sync="dialogVisible"
      width="60vw"
      class="article_body"
      :append-to-body="true"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <span slot="title" />
      <div>
        <img class="article_colse" src="@/assets/articleColse.png" @click="handleClose()">
        <div class="article_title ft18 font_weight colBlueTitle">项目介绍</div>
        <div class="flex_img colBlueTitle ft18 mt10">
          <img class="mr20" src="@/assets/articleLeft.png">
          {{ res.name }}
          <img class="ml20" src="@/assets/articleRight.png">
        </div>
        <div class="article_content ft18 font_weight pr30 pl10 pt20">
          <div>{{ res.description }}</div>
          <div v-if="res.p1" class="article_image pt70" :style="{'overflow-x': res.p1.split(';').length > 5 ? 'auto' : 'unset'}">
            <div class="article_x" :style="{width: `${10.7 * res.p1.split(';').length}vw`}">
              <img v-for="(item, index) in res.p1.split(';')" :key="index" class="mr20" :src="item" @click="getNowImg(index)">
            </div>
          </div>
          <el-dialog
            width="65vw"
            :show-close="false"
            class="inner_imgage"
            :visible.sync="innerVisible"
            :close-on-click-modal="false"
            :append-to-body="true"
          >
            <span slot="title" />
            <div>
              <div class="inner_image mt15">
                <img class="inner_arrow" src="@/assets/leftArrow.png" @click="leftRight(1)">
                <div class="inner_relative">
                  <div class="inner_close ft24 colBlueTag" @click="innerVisible = false">关闭</div>
                  <img v-if="res.p1" class="mr35 ml35 inner_import" :src="res.p1.split(';')[nowIndex]">
                </div>
                <img class="inner_arrow" src="@/assets/rightArrow.png" @click="leftRight(2)">
              </div>
            </div>
          </el-dialog>
          <div v-if="res.video" class="box_video">
            <video controls="controls" class="vid" autoplay muted>
              <source :src="res.video" type="video/mp4">
            </video>
          </div>
        </div>
        <div v-if="res.link" class="article_btn colBlueTag ft16" @click="linkOpen()">进入项目</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDetailByid, getByCondition } from '@/api/detailPage'
import drawMixin from '@/utils/drawMixin' // 自适应缩放
export default {
  name: 'ArticleDialogImg',
  mixins: [drawMixin],
  data() {
    return {
      dialogVisible: false,
      innerVisible: false,
      videoShow: null,
      res: [],
      imageData: [],
      nowIndex: null
    }
  },
  mounted() {
  },

  methods: {
    // 切换图片
    leftRight(type) {
      if (type === 1) {
        this.nowIndex === 0 ? this.nowIndex = this.res.p1.split(';').length - 1 : this.nowIndex--
      }
      if (type === 2) {
        this.nowIndex === this.res.p1.split(';').length - 1 ? this.nowIndex = 0 : this.nowIndex++
      }
    },
    // 获取图片
    getNowImg(index) {
      this.nowIndex = index
      this.innerVisible = true
    },
    // 加载数据
    handLoad(id) {
      this.getDetail(id)
      // this.getVideo(3)
      // this.getImageApi(1)
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    // 获取页面数据
    async getDetail(id) {
      const res = await getDetailByid(id)
      this.res = res
    },
    linkOpen() {
      window.location.href = this.res.link
    },
    // 获取视频流
    getVideo(id) {
      this.video = `http://115.29.207.19:8086/example/getVideo?exampleId=${id}`
    },
    // 判断是否有视频流
    async getByconditionApi(id) {
      const res = await getByCondition(id)
      // console.log(res)
      this.videoShow = res.video
    }
    // base64图片接口
    // async getImageApi() {
    //   const res = await getPictureById(this.id)
    //   // console.log(res)
    //   this.imageData = res
    // }
  }
}
</script>

<style lang="scss" scoped>
    ::v-deep .el-dialog__header {
      padding: 0
    }
    .article_body {
        ::-webkit-scrollbar {
            width: 0.3vw;
            margin-left: 1vw;
        }
        ::-webkit-scrollbar-track {
            // background-color: red;
            background-color: #03182c;
            border-radius: 0.15vw;
        }
        ::-webkit-scrollbar-track-piece{
            background-color: #03182c;
            border-radius: 0.15vw;
        }
        ::-webkit-scrollbar-thumb{
            background-color: #fff;
            border-radius: 0.15vw;
        }
        ::v-deep .el-dialog {
            background: none;
            margin-top: 25vh !important;
        }
        ::v-deep .el-dialog__body {
            padding: 0;
            background: url("~@/assets/articleBack.png");
            background-size: 100% 100%;
            height: vh(512);
            .article_title {
                text-align: center;
                line-height: vh(40);
            }
            .flex_img {
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: vw(38);
                    height: vw(37.95);
                }
            }
            .article_image {
              width: 100%;
              margin-top: vh(13);
              overflow: hidden;
              overflow-x: scroll;
              white-space: nowrap;
              display: flex;
              flex-direction: column;
              &::-webkit-scrollbar {
                height: 0.3vw; /* 设置滚动条的高度 */
              }
              /* 定义滚动条滑块样式 */
              &::-webkit-scrollbar-thumb {
                background-color: #fff; /* 设置滑块的背景颜色 */
                border-radius: 0.15vw; /* 设置滑块的圆角 */
              }
              /* 定义滚动条轨道样式 */
              &::-webkit-scrollbar-track {
                background: #f0f0f0; /* 设置轨道的背景颜色 */
              }
              .article_x {
                text-indent: 0;
                display: inline-block;
                overflow: hidden;
                font-size: 0
              }
              img {
                width: vw(190);
                height: vw(108)
              }
              img:last-child {
                margin-right: 0
              }
            }
            .article_content {
                width: vw(1080);;
                height: vh(310);
                overflow-y: auto;
                color: #fff;
                margin: vh(25) auto 0 auto;
                font-weight: bold;
                text-indent: vw(38);
                line-height: vh(30);
            }
            .article_btn {
                background: url("~@/assets/articleBtn.png");
                background-size: 100% 100%;
                width: vw(152);
                height: vw(48);
                position: absolute;
                right: vw(25);
                bottom: vh(20);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .article_colse {
                width: vw(20);
                height: vw(20);
                position: absolute;
                right: vw(40);
                top: vh(35);
            }
        }
    }
    .inner_imgage {
      ::v-deep .el-dialog{
        background: none;
      }
      ::v-deep .el-dialog__body {
        padding: 0;
        .inner_close {
          text-align: right;
          position: absolute;
          right: vw(34);
          top: vh(-40)
        }
        .inner_relative {
          position: relative;
        }
        .inner_image {
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 50vh;
        }
        .inner_import {
          width: auto;
          max-width: 70vw;
          max-height: 75vh
        }
        .inner_arrow {
          width: vw(58);;
          height: vw(68);
        }
      }
    }
  .mr20 {
    margin-right: vw(20)
  }
  .ft18 {
    font-size: vw(18)
  }
  .ft16 {
    font-size: vw(16)
  }
  .pr30 {
    padding-right: vw(30)
  }
  .pt20 {
    padding-top: vh(20)
  }
  .pl10 {
    padding-left: vw(10)
  }
  .mt10 {
    margin-top: vh(10)
  }
  .ml10 {
    margin-left: vw(10)
  }
  .ml20 {
    margin-left: vw(20)
  }
  .mr10 {
    margin-right: vw(10)
  }
  .pt70 {
    padding-top: vh(45)
  }
  .ft24 {
    font-size: vw(24)
  }
  .mr70 {
    margin-right: vw(70)
  }
  .mr35 {
    margin-right: vw(35)
  }
  .ml35 {
    margin-left: vw(35)
  }
  .mt15 {
    margin-right: vw(15)
  }
  .box_video {
    width: 100%;
    margin-top: vh(30);
    text-align: center;
    .vid {
      width: 70%;
      height: 100%;
    }
  }
</style>
